<template>

  <div>
    <!--使用draggable组件-->

    <div class="itxst">
      <div class="col">
        <draggable v-model="arr1" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass"
          chosenClass="chosenClass" @start="onStart" @end="onEnd">
          <transition-group :style="style">
            <div class="item" v-for="item in arr1" :key="item.id">{{ item.name }}</div>
          </transition-group>
        </draggable>
      </div>
      <div class="col">
        <draggable v-model="arr2" group="site" animation="100" dragClass="dragClass" ghostClass="ghostClass"
          chosenClass="chosenClass" @start="onStart" @end="onEnd">
          <transition-group :style="style">
            <div class="item" v-for="item in arr2" :key="item.id" @click="on(item)">{{ item.name }}</div>
          </transition-group>
        </draggable>
      </div>
    </div>


  </div>

</template>

<style scoped>
/*被拖拽对象的样式*/

.group {
  min-height: 120px;
  display: block;
}

/* .item {

  padding: 6px;

  background-color: #fdfdfd;

  border: solid 1px #eee;

  margin-bottom: 10px;

  cursor: move;

} */

/*选中样式*/

.chosen {

  border: solid 1px #3089dc !important;

}

.colors {
  margin-left: 20px;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

ul,
li,
ol {
  list-style: none;
}

.ghostClass {
  background-color: blue !important;
}

.chosenClass {
  background-color: red !important;
  opacity: 1 !important;
}

.dragClass {
  background-color: blueviolet !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

.itxst {
  margin: 10px;
}

.title {
  padding: 6px 12px;
}

.col {
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
}

.col+.col {
  margin-left: 10px;
}

.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
}

.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}

.item+.item {
  border-top: none;
  margin-top: 6px;
}
</style>

<script>

//导入draggable组件

import { VueDraggableNext } from 'vue-draggable-next'

export default {

  //注册draggable组件

  components: {

    draggable: VueDraggableNext,

  },

  data() {

    return {

      drag: false,

      //定义要被拖拽对象的数组

      arr1: [
        { id: 1, name: 'www.itxst.com' },
        { id: 2, name: 'www.jd.com' },
        { id: 3, name: 'www.baidu.com' },
        { id: 4, name: 'www.taobao.com' }
      ],
      arr2: [],
    };

  },

  methods: {
    //开始拖拽事件
    onStart(e) {
      this.drag = true;
      console.log(e.target);

    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
      this.arr1 = [
        { id: 1, name: 'www.itxst.com' },
        { id: 2, name: 'www.jd.com' },
        { id: 3, name: 'www.baidu.com' },
        { id: 4, name: 'www.taobao.com' }
      ]
    },
    on(val) {
      console.log(val);
    }
  },
};

</script>